<template>
  <div class="Fg-Code-Editor">
    <div v-if="name" class="Fg-Code-Editor-label" v-html="topContent"></div>
    <div class="Fg-Code-Editor-content">
      <codemirror v-model="code" @ready="onCmReady" :style="codemirrorStyle" :options="cmOptions"></codemirror>
    </div>
    <div v-if="name" class="Fg-Code-Editor-label">}</div>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror"; // 引入组件
import "codemirror/lib/codemirror.css";
import "codemirror/addon/lint/lint";
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/json-lint";
import "codemirror/addon/lint/javascript-lint";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/theme/base16-dark.css";
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/foldgutter";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/fold/comment-fold";
import "codemirror/addon/fold/markdown-fold";
import "codemirror/addon/fold/xml-fold";
import "codemirror/addon/fold/indent-fold";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/xml-hint";
import "codemirror/addon/hint/sql-hint";
import "codemirror/addon/hint/anyword-hint";
import "codemirror/addon/search/match-highlighter";
import "codemirror/addon/edit/matchbrackets";
import "codemirror/addon/edit/closebrackets";
import "codemirror/mode/css/css.js";
import "codemirror/mode/vue/vue.js";
import jsonlint from "jsonlint";
import { JSHINT } from "jshint";

window.JSHINT = JSHINT;
window.jsonlint = jsonlint;

export default {
  name: "CodeEditor",
  components: {
    codemirror,
  },
  props: {
    modelValue: {},
    // 表示当前编辑器类型
    mode: {
      type: String,
      // text/javascript js编辑器
      // application/json json编辑器
      // text/html html编辑器
      // text/css css编辑器
      default: "text/html",
    },
    placeholder: {
      type: String,
      default: "// 你的初始代码",
    },
    // 方法名
    name: {
      type: String,
      default: "",
    },
    // 参数
    params: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      code: this.modelValue || this.placeholder,
      cmOptions: {
        mode: this.mode,
        gutters: [
          "CodeMirror-lint-markers",
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
        ],
        lineNumbers: true,
        line: true,
        lint: true,
        lineWrapping: true,
        autofocus: true,
        autoCloseBrackets: true,
        foldGutter: true, // 块槽
        hintOptions: { completeSingle: true },
        matchTags: { bothTags: true },
        matchBrackets: true,
        showCursorWhenSelecting: true,
        styleSelectedText: true,
        styleActiveLine: true,
        autoRefresh: true,
        highlightSelectionMatches: {
          minChars: 2,
          trim: true,
          style: "matchhighlight",
          showToken: false,
        },
      },
      codemirrorStyle: {
        fontSize: "18px",
        lineHeight: "150%",
        height: "450px",
        border: "1px solid #EBEEF5",
      },
    };
  },
  computed: {
    // text/javascript js编辑器
    // application/json json编辑器
    // text/html html编辑器
    // text/css css编辑器
    topContent() {
      return {
        "text/javascript": `<div><span style="color: #708">function</span> <span style="color: #00f">${this.name}</span>(<span style="color: #00f">${this.params}</span>) {</div>`,
        "text/css": `<span style="color: #164;">.${this.name}</span> {`,
      }[this.mode];
    },
  },
  watch: {
    code() {
      this.$emit("input", this.code);
      this.$emit("change", this.code);
    },
  },
  methods: {
    onCmReady(cm) {
      // cm.on("inputRead", (cm, obj) => {
      //   if (obj.text && obj.text.length > 0) {
      //     let c = obj.text[0].charAt(obj.text[0].length - 1);
      //     if ((c >= "a" && c <= "z") || (c >= "A" && c <= "Z")) {
      //       cm.showHint({ completeSingle: false }); // 自动填充关闭了它
      //     }
      //   }
      // });
    },
  },
};
</script>

<style lang="scss" >
.Fg-Code-Editor {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f5f5f5;
  .Fg-Code-Editor-label {
    background-color: #f7f7f7;
    font-family: monospace;
    font-size: 18px;
    line-height: 150%;
    margin-left: 57px;
    border-left: 1px solid #ddd;
    padding-left: 5px;
    padding: 5px;
  }
  .Fg-Code-Editor-content {
    height: calc(100% - 76px);
    overflow: auto;
  }
  .vue-codemirror {
    border: none !important;
    height: 100% !important;
    .CodeMirror {
      height: 100% !important;
    }
    .CodeMirror-line {
      padding-left: 27px !important;
    }
  }
  .CodeMirror-hints {
    z-index: 300 !important;
  }
}
</style>